/**
* 描述：企业登录页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  @import 'src/styles/common';
  @import 'src/styles/icons';
  @import 'src/styles/company/common';
  canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
  }
  .main-login{
    overflow-y: auto;
    min-height: 540px;
  }
  // 企业中心输入框无圆角
 .formNoRadius3{
     font-size: 14px;
  .ivu-form-item-label{
    line-height: 24px;height: 42px;font-size: 14px;
  }
  .ivu-input, .ivu-select-input, .ivu-select-selection{
    border-radius: 0 !important;
  }
  .ivu-select, .ivu-input, textarea,.ivu-date-picker{
    width:450px;box-sizing: content-box;font-size: 14px;
  }
  .ivu-select-selection{
    height: 40px;line-height: 40px;
  }
  .ivu-input{
    width:410px;
  }
  .yanzheng{
  .ivu-input{
    width: 160px;
  }
  .ivu-form-item-content{
    width: 450px;
  }
  }
  .shouji{
  .ivu-input{
    width: 220px;
  }
  .ivu-form-item-content{
    width: 450px;
  }
  }
  textarea{
    width:434px !important;background: #fcfcfc;
  }
  .logo-uploader{
    border:1px #ccc dashed;height: 100px;width: 100px;
  .el-icon-plus{
    width:10px;height: 10px;margin:42px;
  }
  }
  button{
    font-size: 14px;width:120px;text-align: center;
  }
  .date .ivu-icon-ios-calendar-outline, .date .ivu-icon-ios-close{
    padding:6px;
  }
  }
</style>
<template>
  <div class="main-login">
    <div class="l-login-headerTop">
      <div class="l-inner clearfix">
        <div class="logo fl">
          <img src="/static/images/web/company/wzlogo.png" width="70" height="78" alt="微职">
          <i class="name">微职-最贴心的校园招聘平台</i>
          <div class="clear"></div>
        </div>
        <div class="fr" style="margin-top:32px;">
            <span class="fl">
              <i class="iconCom iconCom_index02"></i>
              <i class="font">政府合作</i>
              <div class="clear"></div>
            </span>
            <span class="fl">
              <i class="iconCom iconCom_index01"></i>
              <i class="font">城市代理</i>
              <div class="clear"></div>
            </span>
              <span class="fl">
                <i class="iconCom iconCom_index03"></i>
                <i class="font">手机微职</i>
                <div class="clear"></div>
            </span>
              <span class="fl">
                <i class="iconCom iconCom_index04"></i>
                <i class="font">企业服务</i>
                <div class="clear"></div>
            </span>
            <div class="clear"></div>
        </div>
      </div>
    </div>
    <!--<div class="com-line cccShadow"></div>-->
    <div class="login-bg">
        <div class="l-inner" style="width:900px;">
          <transition name="bounceLeft">
            <div class="main">
              <div class="lg-left cccShadow">
                <img src="/static/images/web/company/login_bg02.png" width="100%" height="100%" alt="登录">
              </div>
              <div class='login-form cccShadow' v-show="showLogin">
                <div class="title">登录微职</div>
                <div class="titleMini">企业登录</div>
                <div class="flex-row">
                  <span>账号</span>
                  <div class="clear"></div>
                  <input class='lf-input' v-model="loginInfo.account" placeholder='请输入账号' type='text'>
                </div>
                <div class="flex-row">
                  <span>密码</span>
                  <div class="clear"></div>
                  <input class='lf-input' v-model="loginInfo.password" placeholder='请输入密码' type='password'
                         @keyup.enter="login()">
                </div>
                <Checkbox v-model="single" style="float: left">记住密码</Checkbox>
                <a style="float:right;color:#0066ff;font-size:12px;" @click="clickForgotPassword">忘记密码？</a>
                <div class="clear"></div>
                <el-button type="primary" class="lf--submit" @click="login()" :loading="loadingBut">登 录</el-button>
                <div class="zcTz"><i>还没有帐号？</i><a href="#" @click="clickRegister">免费注册 </a><i class="iconCom iconCom_index05"></i><div class="clear"></div></div>
                <div class="hr"></div>
                <div class="fonts">温馨提示：用人单位招聘人才，以任何名义向应聘者收取费用都是不被法律允许的，请应聘者提高警惕！求职者要时刻睁大眼睛，谨防招聘骗局。</div>
              </div>
              <div class="clear"></div>
            </div>
          </transition>
        </div>
    </div>
    <!--修改手机号-->
    <Modal v-model="phoneFormShow" :mask-closable="false" :closable="true" width="420" class="noTopBottomBorder">
      <p slot="header" style="color:#000;text-align:center;font-weight: bold;font-size: 18px;">
        <span>忘记密码</span>
      </p>
      <div style="transform: translateX(0%) translateZ(0px);">
        <Form ref="phoneForm" :model="phoneForm" :rules="phoneRule" :label-width="100" class="main-add-1 formNoRadius3">
          <div v-if="step == 1">
            <FormItem label="手机号：" prop="phone">
              <i-input v-model="phoneForm.phone" :maxlength="11"  placeholder="手机号"></i-input>
            </FormItem>
            <FormItem label="图片验证：" class="yanzheng">
              <i-input type="text" placeholder="请输入图片验证" v-model="captcha" style="width:100px;float: left;"/></i-input>
              <a style="text-align: center;margin-top: 10px;float: left;width:auto;float: left;margin-left: 10px;" @click="rndNum()"> 点击刷新</a>
              <img style="width:120px;float: right;margin-left:0;" :src="`/api/pub/captcha.jpg?randKey=${code}`">
              <div class="clear"></div>
            </FormItem>
          </div>
          <div v-if="step == 2">
            <FormItem label="手机验证码：" prop="smsCode" class="shouji">
              <i-input v-model="phoneForm.smsCode" :maxlength="6"  placeholder="手机验证码" style="width:150px;float: left"></i-input>
              <Button type="primary" :loading="phoneFunLoading" @click="sendSmsCode" style="width: 120px;padding:2px 0;border-radius: 0;float: right;line-height:26px;">
                <span v-if="!phoneFunLoading">发送验证码</span>
                <span v-else>{{countDown}}后重新发送</span>
              </Button>
              <div class="clear"></div>
            </FormItem>
            <FormItem label="设置新密码：" prop="password">
              <i-input v-model="phoneForm.password" :maxlength="20" type="password"  placeholder="密码6-20位，必须同时含有数字、字母"></i-input>
            </FormItem>
          </div>
        </Form>
      </div>
      <div slot="footer" style="width:100px;margin:0 auto;" v-if="step == 1">
        <i-button type="primary" size="large" @loading="addLoading" @click="changeStep" style="width:100px;margin:0 auto;">发送手机</i-button>
      </div>
      <div slot="footer" style="width:220px;margin:0 auto;" v-if="step == 2">
        <i-button type="primary" size="large" @loading="addLoading" @click="forgotPassword" style="width:100px;">确定</i-button>
        <i-button size="large" @click="stepReturnForgot" style="width:100px;">返回上一步</i-button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import md5 from 'js-md5';
  import { mapState, mapActions } from 'vuex';
  import { companyLogin, sendSmsCode, companyLoginForgot } from '@/service/company/login/loginMService';
  export default {
    computed: {
      ...mapState([
        'companyUserInfo'
      ])
    },
    data () {
      return {
        step: 1,
        showLogin: false,
        loginInfo: {},
        loadingBut: false,
        single: true,
        addLoading: false,
        formLoading: false,
        phoneFormShow: false,
        captcha: '',
        code: '',
        phoneForm: {}, // 修改手机Form
        phoneRule: {},  // 修改手机Form验证规则
        countDown: 60, // 倒计时初始值
        countDownIntervalid: null, // 倒计时定时器
        phoneFunLoading: false // 验证码loading
      };
    },
    components: {},
    mounted () {
      if (this.single) {
        let result = this._hyTool.getStore('companyLoginForm');
        if (result) {
          let companyLoginForm = JSON.parse(result);
          this.loginInfo = companyLoginForm || {};
        }
      } else {
        this._hyTool.removeStore('companyLoginForm');
      }
      this.showLogin = true;
    },
    methods: {
      ...mapActions([
        'getCompanyUserInfo',
        'getCurrentComp'
      ]),
      stepReturnForgot () {
        this.step = 1;
      },
      cencelForgot () {
          this.phoneFormShow = false;
          this.step = 1;
          this.phoneForm = {};
          this.captcha = '';
      },
      // 点击登录
      async login () {
        if (!this.loginInfo.account) {
          this.$message({
            message: '请输入用户名',
            type: 'warning'
          });
          return;
        }
        if (!this.loginInfo.password) {
          this.$message({
            message: '请输入密码',
            type: 'warning'
          });
          return;
        }
        try {
          this.loadingBut = true;
          let loginInfo = this._hyTool.deepCopy(this.loginInfo);
          loginInfo.password = md5(loginInfo.password);
          let result = await companyLogin(loginInfo);
          this._hyTool.removeStore('webLoginInfo');
          this._hyTool.removeStore('companyLoginInfo');
          this._hyTool.removeStore('mgeLoginInfo');
          this._hyTool.setStore('companyLoginInfo', result.data);
          if (this.single) {
            this._hyTool.setStore('companyLoginForm', this.loginInfo);
          } else {
            this._hyTool.removeStore('companyLoginForm');
          }
          this.$Notice.success({title: '登录成功!'});
          await this.getCompanyUserInfo();
          if (result.data.role === 'companyRoot') await this.getCurrentComp();
          this.$router.push({path: '/company/main/station'});
        } catch (e) {
          console.log(e);
          this.loadingBut = false;
          setTimeout(() => {
            this.loginInfo.password = ''; // 错误则清除密码
          }, 1000);
        }
      },
      // 点击注册
      clickRegister () {
        this.$router.replace('/company/register');
      },
      // 点击修改手机号
      clickForgotPassword (row) {
        this.phoneForm = row;
        this.phoneFormShow = true;
        this.step = 1;
        this.phoneForm = {};
        if (this.loginInfo.account) this.phoneForm.phone = this.loginInfo.account;
        this.captcha = '';
        this.rndNum();
      },
      // 发送验证码
      async sendSmsCode () {
        if (!this.phoneForm.phone) {
          this.$Notice.info({title: '请输入手机号'});
          return;
        }
        if (!this.captcha) {
          this.$Notice.info({title: '请输入图片验证码'});
          this.step = 1;
          this.captcha = '';
          return;
        }
        this.phoneFunLoading = true;
        await sendSmsCode({phone: this.phoneForm.phone}, {randKey: this.code, captcha: this.captcha}); // 获取短信验证码接口
        this.$Notice.success({title: '发送成功'});
        this.countDownIntervalid = setInterval(() => {
          if (this.countDown <= 0) {
            this.phoneFunLoading = false;
            clearInterval(this.countDownIntervalid);
            this.countDown = 60;
          } else {
            this.countDown = this.countDown - 1;
          }
        }, 1000);
      },
      changeStep () {
          if (!this.phoneForm.phone) {
            this.$Notice.success({title: '请填写手机号!'});
            return;
          }
          let reg = /^(1[3,4,5,6,7,8])\d{9}$/;
          if (!reg.test(this.phoneForm.phone)) {
            this.$Notice.success({title: '手机号格式错误'});
            return;
          }
          if (!this.captcha) {
            this.$Notice.success({title: '请填写图片验证码!'});
            this.step = 1;
            this.captcha = '';
            return;
          }
          this.step = 2;
          this.phoneForm.smsCode = '';
          this.phoneForm.password = '';
          this.sendSmsCode();
      },
      // 生成随机数 5位 即 随机生成图片
      rndNum () {
        let xxx = Math.random().toString(36).substr(2);
        let aa = xxx.slice(0, 5);
        this.code = aa;
      },
      // 确认修改手机
      async forgotPassword (name) {
          if (!this.phoneForm.smsCode) {
            this.$Notice.success({title: '请填写手机验证码!'});
            return;
          }
          if (!this.phoneForm.password) {
            this.$Notice.success({title: '请填写新密码!'});
            return;
          }
          let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[,.#%’+*-:;^_`0-9A-Za-z]{6,20}$/;
          if (!reg.test(this.phoneForm.password)) {
            this.$Notice.success({title: '密码6-20位，必须同时含有数字、字母!'});
            return;
          }
          if (!this.captcha) {
            this.$Notice.success({title: '请填写图片验证码!'});
            this.step = 1;
            this.captcha = '';
            return;
          }
        try {
          let para = {
            phone: this.phoneForm.phone,
            smsCode: this.phoneForm.smsCode,
            password: this.phoneForm.password
          };
          this.formLoading = true;
          await companyLoginForgot(para);
          this.$Notice.success({title: '操作成功'});
          this.cencelForgot();
        } catch (e) {
          console.log(e);
        }
      }
    }
  };
</script>
